<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Header Navigation</title>
    <style>
        /* 基本重置 */
body, h1, nav, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

/* 头部布局 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
}

/* Logo 样式 */
.logo {
    font-size: 24px;
    font-weight: bold;
}

/* 导航菜单样式 */
.navigation {
    display: flex;
    gap: 20px;
}

.navigation a {
    display: block;
    padding: 10px;
    color: white;
    transition: color 0.3s, transform 0.3s;
}

.navigation a:hover,
.navigation a.active {
    color: #ffd700; /* 金色 */
    transform: scale(1.1);
}

.navigation a.active {
    border-bottom: 2px solid #ffd700; /* 金色下划线 */
}

/* 登录按钮样式 */
.login {
    padding: 10px 20px;
    background-color: #ffd700; /* 金色 */
    color: #333;
    text-align: center;
    transition: background-color 0.3s, transform 0.3s;
}

.login:hover {
    background-color: #e6c225; /* 较深的金色 */
    transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .navigation {
        justify-content: center;
        width: 100%;
    }

    .login {
        justify-self: center;
    }
}
    </style>
</head>
<body>
    <header class="header">
        <div class="logo">Logo</div>
        <nav class="navigation">
            <a href="/" class="active">首页</a>
            <a href="/download">下载</a>
            <a href="/about">关于我们</a>
        </nav>
        <div class="login">登录</div>
    </header>
</body>
</html>